<template>
  <div class="app-container">
    <el-descriptions :column="2" border>
      <el-descriptions-item>
        <template slot="label">
          金额
        </template>
        ￥{{info.payfAmount}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          缴费时间
        </template>
        {{info.payfPaymentDate}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          账单类型
        </template>
        <dict-tag :options="dict.type.bill_type" :value="info.payfBillType"/>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          款项类型
        </template>
        <dict-tag :options="dict.type.payment_type" :value="info.payfPaymentType"/>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          费用周期
        </template>
        {{ info.payfStartDate }}-{{ info.payfEndDate }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          合同编号
        </template>
        <el-link type="primary" @click="showInfo(info.payfContractId)">{{info.payfContractCode}}</el-link>
      </el-descriptions-item>
      <el-descriptions-item span="2">
        <template slot="label">
          缴费方
        </template>
        {{info.payfCustomerName}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          联系人
        </template>
        {{info.customerLinkman}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          联系电话
        </template>
        {{info.customerPhone1}}
      </el-descriptions-item>
      <el-descriptions-item span="2">
        <template slot="label">
          账单备注
        </template>
        {{info.remark}}
      </el-descriptions-item>
      <el-descriptions-item span="2">
        <template slot="label">
          支付凭证
        </template>
        <div v-if="info.payfPaymentUrl">
          <image-preview v-for="src in info.payfPaymentUrl.split(',')" :width="90" :height="90" :src="src" style="margin-right: 10px"></image-preview>
        </div>
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions :column="2" border style="margin-top: 20px">
      <el-descriptions-item>
        <template slot="label">
          录入人
        </template>
        {{info.nickName}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          联系电话
        </template>
        {{info.phonenumber}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          所在公司
        </template>
        {{info.companyName}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          所在部门
        </template>
        {{info.deptName}}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
import { getPayfeesInfo } from "@/api/business/payfeesInfo";
export default {
  name: "payfeesInfo",
  dicts: ['bill_type', 'payment_type'],
  data() {
    return {
      info: {},
      id: null,
    }
  },
  created() {
    this.id = this.$route.params && this.$route.params.id;

  },
  mounted() {
    if(this.id) {
      this.getDetails()
    }
  },
  methods: {
    getDetails() {
      getPayfeesInfo(this.id).then(r => {
       this.info = r.data
        this.info.payfPaymentType = this.info.payfPaymentType.split(",");
        this.info.payfBillType = this.info.payfBillType.toString();
      })
   },
    /** 复跳转详情 */
    showInfo(assetId) {
      this.$router.push('/ContractLedger/contract-info/' + assetId)
    },
  },
}
</script>

<style scoped lang="scss">
.app-container {
  height: calc(100vh - 84px);
}
.formC {
  width: 100%;
  padding: 0 50px;
  height: calc(100vh - 170px);
  overflow-y: auto;
}
::v-deep {
  .el-descriptions-item__label.is-bordered-label {
    width: 260px !important;
  }
}
</style>
